<template>
  <div>
    <van-nav-bar
      :z-index="999"
      :fixed="true"
      left-arrow
      @click-left="onClickLeft"
      :placeholder="true"
      title="秘籍详情"
    >
      <template #right>
        <van-icon v-if="favorite" name="star-o" size="18" @click="enshrine" />
        <van-icon
          v-else
          name="star"
          color="rgb(252, 184, 20)"
          size="18"
          @click="cancels"
        />
      </template>
    </van-nav-bar>
    <div class="secret-details">
      <div class="secret_title">
        <p>{{ Details.title }}</p>
        <div>
          <div>
            <p>来源：</p>
            <div>{{ Details.ly }}</div>
          </div>
          <div>
            <p>时间：</p>
            <div>{{ Details.createTime }}</div>
          </div>
        </div>
      </div>
      <div style="padding:0 16px;" v-html="Details.cnr"></div>

      <!-- 讨论 -->
      <div class="course-catalogue">
        <div class="coures-catalogue">
          <div class="cs-catalog">
            <div>
              <img src="../../assets/images/59 (3).png" alt="" />

              <p>讨论区</p>
            </div>
          </div>
          <div class="sd-comment" v-for="(item, index) in comment" :key="index">
            <img :src="userimg" alt />
            <div>
              <p>{{ item.userId }}</p>
              <div>{{ item.pjtime }}</div>
              <p>{{ item.remork }}</p>
            </div>
            <!-- <div class="sd-collects">
              <img src="../../assets/images/16.png" alt />
              <p>{{ item.del }}</p>
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <div class="sd-input">
      <input type="text" v-model="value" placeholder="说点什么吧~" />
      <div>
        <div @click="announce" class="sd-announce">发表</div>
      </div>
      <div @click="cancel" class="sd-cancel">取消</div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import {
  DrivingComment,
  DrivingDetals,
  CardComments
} from "../../assets/js/api/exam";
import { Collection, CancelCollection } from "../../assets/js/api/apply";
import { MyFavorite } from "../../assets/js/api/user.js";

export default {
  name: "SecretDetails",
  data() {
    return {
      value: "",
      Details: [],
      comment: [],
      favorite: true //是否显示收藏
    };
  },

  mounted() {
    if (localStorage.getItem("token") || sessionStorage.getItem("token")) {
      MyFavorite().then(res => {
        console.log(res);
        let collect = res.data.list;
        for (let i = 0; i < collect.length; i++) {
          if (this.$route.params.lid == collect[i].docid) {
            this.favorite = false;
          }
        }
      });
    }

    // 秘籍详情评论
    DrivingComment(this.$route.params.lid).then(res => {
      // console.log(res);
      this.comment = res.data;
      //  JSON.stringify(res.data.id)
    });
    // 秘籍详情
    this.discuss();
  },

  methods: {
    // 发表评论

    cancel() {
      this.value = "";
    },
    announce() {
      let than = this;
      if (this.value == "") return;
      let obj = {
        pid: than.$route.params.lid,
        remork: than.value
      };
      // console.log(obj);
      CardComments(obj).then(res => {
        if (res.code == 0) {
          // 留言成功之后再次调一次评论接口
          // than.$route.go(0);
          than.value = "";
          Toast.success("发表成功");
          DrivingComment(this.$route.params.lid).then(res => {
            // console.log(res);
            this.comment = res.data;
            //  JSON.stringify(res.data.id)
          });
        }
      });
    },

    discuss() {
      DrivingDetals(this.$route.params.lid).then(res => {
        // console.log(res);
        this.Details = res.data;
        // console.log("我是秘籍详情" + JSON.stringify(this.Details));
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    // 收藏
    enshrine() {
      // console.log("收藏");
      let obj = {
        title: this.Details.title,
        lb: "5",
        docid: this.Details.id,
        jgbh: ""
      };
      // console.log(obj);
      Collection(obj).then(res => {
        // console.log(res);
        if (res.code == 506) {
          Toast("重复收藏");
        }
        if (res.code == 0) {
          Toast.success("收藏成功");
          this.favorite = false;
        }
      });
    },
    // 取消收藏
    cancels() {
      CancelCollection(this.$route.params.lid).then(res => {
        // console.log(res);
        if (res.code == 0) {
          Toast.success("取消成功");
          this.favorite = true;
        }
      });

      // console.log("取消收藏");
    }
  },
  created() {
    let dsBridge = require("dsbridge");
    dsBridge.call("goBack", "", function() {
      history.go(-1);
    });
  }
};
</script>

<style></style>
